<template>
    <div class="user">
        <!--        导航区-->
        <div class="menu">
            <div class="top">
                <el-icon>
                    <HomeFilled/>
                </el-icon>
                <span>
                / 会员中心
                </span>
            </div>
            <el-menu router  :default-active="$route.path"
                     class="el-menu-vertical-demo"
                     @select="handleMenuClick"
            >
                <el-menu-item index="/user/certification">
                    <el-icon>
                        <Calendar/>
                    </el-icon>
                    <span>实名认证</span>
                </el-menu-item>
                <el-menu-item index="/user/order">
                    <el-icon>
                        <Document/>
                    </el-icon>
                    <span>挂号订单</span>
                </el-menu-item>
                <el-menu-item index="/user/patient">
                    <el-icon>
                        <Timer/>
                    </el-icon>
                    <span>就诊人管理</span>
                </el-menu-item>
                <el-menu-item index="/user/profile">
                    <el-icon>
                        <InfoFilled/>
                    </el-icon>
                    <span>账号信息</span>
                </el-menu-item>
                <el-menu-item index="/user/feedback">
                    <el-icon>
                        <Search/>
                    </el-icon>
                    <span>意见反馈</span>
                </el-menu-item>
            </el-menu>
        </div>

        <!--        内容展示区：路由组件展示区-->
        <div class="content">
            <!--            自组件展示结构的地方-->
            <router-view/>
        </div>
    </div>


</template>

<script setup lang="ts">

import {Calendar, Document, HomeFilled, InfoFilled, Search, Timer} from "@element-plus/icons-vue";
import {useRoute,useRouter} from "vue-router";

let $route= useRoute()
let $router =useRouter()

const handleMenuClick = (path:string)=>{
    $router.push({ path , query:{hoscode:$route.query.hoscode } });
}
</script>


<style scoped lang="scss">
.user {
  display: flex;

  .menu {
    flex: 2;
    display: flex;
    flex-direction: column;
    align-items: center;

    .top {
      color: #7f7f7f;
    }
  }

  .content {
    flex: 8;
  }
}
</style>